<template>
  <div>
    <h1>v-if v-show v-for</h1>
    <ul>
      <!-- key是唯一的标识 -->
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <ul>
      <li v-for="(item, index) of arr" :key="index">{{ item }}</li>
    </ul>
    <!-- key  -->
    <!-- v-for在进行渲染时 key有其他唯一值时，不建议使用下标 -->

    <ul>
      <li v-for="(value, key, index) in obj" :key="index">{{ value }}</li>
    </ul>
    <!-- v-for v-if避免一起使用  能一起使用 但是浪费性能
    因为v-for 优先级

    v-if 有可能执行  有可能不执行
    v-for优先级高 先循环

    v-if v-else
    v-if v-else-if v-else

    v-cloak指令来解决屏幕闪动的问题
    <div id="app" v-cloak>
    {{context}}
    </div>
    css当中写
    [v-cloak]{
    display: none;
    }
    
    -->
    <!-- 
        


     -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["足球", "篮球", "乒乓球"],
      obj: {
        name: "冯大力",
        yangzi: "很帅",
        msg: "帅奇，很欢乐",
      },
    };
  },
};
</script>

<style lang="less" scoped>
</style>